<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组件的使用</title>
  </head>
  <body>
    <div id="app">
      <div>
        <my-component></my-component>
        <se-cond></se-cond>
        <third></third>
      </div>
    </div>
  </body>
  <script src="./js/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.2.0/vuex.min.js"></script>
  <script>
    //   自定义全局组件
    Vue.component("my-component", {
      template: "<div>这里是全局组件</div>"
    })

    Vue.component("third", {
      template: "<div>{{message}}</div>",
      data() {
        return {
          message: "组件内容"
        }
      }
    })

    var Child = {
      template: "<div>定义的私有组件内容</div>"
    }

    var app = new Vue({
      el: "#app",
      data: {},
      components: {
        "se-cond": Child
      }
    })
  </script>
  <!-- <h5>自定义的标签就是组件,每个标签代表一个组件</h5> -->
  <!-- 注意
    1、任何使用Vue的地方都可以使用组件
    2、组件需要注册后才能使用。注册有全局注册和局部 注册两种方式。
--></html>
